<template>
	<s-layout class="set-wrap" title="包裹合箱">
		<uni-forms ref="form" :modelValue="state.formData" border>
			<view class="bg-white ss-p-x-20 ss-p-y-30 ss-m-t-20">
				您选择了 <text style="font-weight: bold; color: red; font-size: 50rpx">{{ state.formData.mergeOrderIdList.length }}笔</text> 订单 <br>
				在这里填写您的包裹邀请码，进行包裹合箱 <br>
				提交后无法撤回包裹订单，请您谨慎操作 <br>
				注意：包裹运费支付、收货等操作由包裹发起者进行。地址也是邮寄到同一地址。<br>
			</view>
			<view class="bg-white ss-p-x-20 ss-p-y-30 ss-m-t-20">
				<view class="title ss-m-b-30"> 包裹邀请码</view>
				<view class="mobile-box">
					<uni-easyinput
							v-model="state.formData.orderId"
							:inputBorder="false"
							paddingLeft="10"
							placeholder="请输入"
							type="digit"
					>
					</uni-easyinput>
				</view>
			</view>
		</uni-forms>
		<su-fixed bottom placeholder>
			<view class="ss-flex ss-row-between ss-p-x-30 ss-p-y-10">
				<button class="submit-btn ss-reset-button ui-BG-Main ui-Shadow-Main" style="width: 50%" @tap="onSearch">
					查询
				</button>
				<button class="submit-btn ss-reset-button ui-BG-Main ui-Shadow-Main" style="width: 50%" @tap="onSubmit">
					提交
				</button>
			</view>
		</su-fixed>
	</s-layout>
</template>

<script setup>
import {onLoad} from '@dcloudio/uni-app';
import {reactive, ref} from 'vue';
import sheep from '@/sheep';

const userInfo = uni.getStorageSync('userInfo');

const filesRef = ref(null);
const state = reactive({
	radioList: [
		{
			type: '产品功能问题反馈',
		},
		{
			type: '建议及意见反馈',
		},
		{
			type: '投诉客服其他问题',
		},
	],
	formData: {
		mergeOrderIdList: [],
		orderId: undefined,
	},
	imageFiles: [],
	current: 0,
});

onLoad((options) => {
	state.formData.mergeOrderIdList = options.orderIds.split(',');
})

async function onSubmit() {
	if (sheep.$helper.isRealEmpty(state.formData.orderId)) {
		sheep.$helper.toast('请输入包裹邀请码');
		return;
	}

	uni.showModal({
		title: '提示',
		content: '确定要合箱吗？',
		success: async (res) => {
			if (res.confirm) {
				const res = await sheep.$api.order.mergeOrderExpress(state.formData);
				if (res) {
					sheep.$helper.toast('提交成功');
					uni.reLaunch({
						url: '/pages/order/list'
					});
				}
			}
		}
	});
}

async function onSearch() {
	if (sheep.$helper.isRealEmpty(state.formData.orderId)) {
		sheep.$helper.toast('请输入包裹邀请码');
		return;
	}

	const res = await sheep.$api.order.expressDetail({orderId: state.formData.orderId});
	if (res) {
		sheep.$router.go('/pages/order/express/detail', {
			id: state.formData.orderId
		});
	}
}

function radioChange(e) {
	state.formData.type = e.detail.value;
}
</script>

<style lang="scss" scoped>
.type-box {
	border-top: 2rpx solid #f9fafb;
}

.uni-forms {
	width: 100%;
}

.title {
	font-size: 30rpx;
	font-weight: bold;
	color: #333333;
	line-height: normal;
}

:deep() {
	.uni-easyinput__placeholder-class {
		color: #bbbbbb !important;
		font-size: 28rpx !important;
		font-weight: 400 !important;
		line-height: normal !important;
	}

	.uni-forms-item__label .label-text {
		font-size: 28rpx !important;
		color: #333333 !important;
		line-height: normal !important;
	}

	.uni-list-item__content-title {
		font-size: 28rpx !important;
		color: #333333 !important;
		line-height: normal !important;
	}

	.uni-easyinput__content-textarea {
		font-size: 28rpx !important;
		color: #333333 !important;
		line-height: normal !important;
		margin-top: 4rpx !important;
		padding-left: 20rpx !important;
	}

	.uni-icons {
		font-size: 40rpx !important;
	}

	.icon-del-box {
		width: 32rpx;
		height: 32rpx;
		top: 0;
		right: 0;

		.icon-del {
			width: 24rpx;
		}
	}
}

.radio-subtitle {
	font-size: 28rpx;
	font-weight: 500;
	color: #333333;
	line-height: 42rpx;
}

.textarea {
	min-height: 322rpx;
	background: #f9fafb;
	border-radius: 20rpx;
	padding: 20rpx;
	margin: 30rpx 20rpx 46rpx 0;

	.area {
		height: 238rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #333;
		line-height: 50rpx;
		width: 100%;
	}

	.pl-style {
		font-size: 24rpx;
		color: #b1b3c7;
		font-weight: 500;
	}
}

.mobile-box {
	background: #f9fafb;
	border-radius: 20rpx;
}

.submit-btn {
	width: 334rpx;
	height: 74rpx;
	border-radius: 37rpx;
}

.kefu-btn {
	width: 334rpx;
	height: 74rpx;
	border-radius: 37rpx;
	background: #eeeeee;
	color: #333333;
}
</style>
